<template>
  <div>
    <a-card title="异常流量" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
      <mixline-chart id="abnormal" :opiton="optionAbnormal" style="width:100%; height:200px; overflow: hidden;"></mixline-chart>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import mixlineChart from './mixlineChart'
export default {
  name: 'AnomaliesFlow',
  components: {
    mixlineChart
  },
  data () {
    return {
      optionAbnormal: {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        legend: {
            data: ['异常type1', '异常type2'],
            x: 'center',
            y: '20',
            textStyle: { // 图例文字的样式
                color: '#666',
                fontSize: 12
            }
        },
        axisPointer: {
          link: { xAxisIndex: 'all' }
        },
        dataZoom: [
          {
            show: false,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
          },
          {
            type: 'inside',
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
          }
        ],
        grid: [{
            left: '10%',
            right: '10%',
            top: 0,
            height: '30%'
        }, {
            left: '10%',
            right: '10%',
            top: '65%',
            height: '30%'
        }],
        xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLine: { onZero: true },
              data: [
              '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00', '2009/6/12 13:00', '2009/6/12 14:00', '2009/6/12 15:00', '2009/6/12 16:00', '2009/6/12 17:00', '2009/6/12 18:00', '2009/6/12 19:00', '2009/6/12 20:00', '2009/6/12 21:00', '2009/6/12 22:00', '2009/6/12 23:00',
              '2009/6/13 0:00', '2009/6/13 1:00', '2009/6/13 2:00', '2009/6/13 3:00', '2009/6/13 4:00', '2009/6/13 5:00', '2009/6/13 6:00', '2009/6/13 7:00', '2009/6/13 8:00', '2009/6/13 9:00', '2009/6/13 10:00', '2009/6/13 11:00', '2009/6/13 12:00', '2009/6/13 13:00', '2009/6/13 14:00', '2009/6/13 15:00', '2009/6/13 16:00', '2009/6/13 17:00', '2009/6/13 18:00', '2009/6/13 19:00', '2009/6/13 20:00', '2009/6/13 21:00', '2009/6/13 22:00', '2009/6/13 23:00'],
              axisLabel: {
                  textStyle: {
                    color: '#999'
                }
              } 
            },
            {
              gridIndex: 1,
              type: 'category',
              boundaryGap: false,
              axisLine: { onZero: true },
              data: [
              '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00', '2009/6/12 13:00', '2009/6/12 14:00', '2009/6/12 15:00', '2009/6/12 16:00', '2009/6/12 17:00', '2009/6/12 18:00', '2009/6/12 19:00', '2009/6/12 20:00', '2009/6/12 21:00', '2009/6/12 22:00', '2009/6/12 23:00',
              '2009/6/13 0:00', '2009/6/13 1:00', '2009/6/13 2:00', '2009/6/13 3:00', '2009/6/13 4:00', '2009/6/13 5:00', '2009/6/13 6:00', '2009/6/13 7:00', '2009/6/13 8:00', '2009/6/13 9:00', '2009/6/13 10:00', '2009/6/13 11:00', '2009/6/13 12:00', '2009/6/13 13:00', '2009/6/13 14:00', '2009/6/13 15:00', '2009/6/13 16:00', '2009/6/13 17:00', '2009/6/13 18:00', '2009/6/13 19:00', '2009/6/13 20:00', '2009/6/13 21:00', '2009/6/13 22:00', '2009/6/13 23:00'],
              position: 'top',
              axisLabel: {
                textStyle: {
                  color: '#999'
                }
              }
            }
          ],
          yAxis: [
            {
              name: '异常type1(m^3/s)',
              type: 'value',
              max: 500,
              axisLabel: {
                textStyle: {
                  color: '#999'
                }
              },
              splitLine: { show: false }
            },
            {
              gridIndex: 1,
              name: '异常type2()',
              type: 'value',
              inverse: true,
              axisLabel: {
                textStyle: {
                  color: '#999'
                }
              },
              splitLine: { show: false }
            }
          ],
          series: [
            {
              name: '异常type1',
              type: 'line',
              symbolSize: 8,
              symbol: 'none', // 去掉折线上的小圆点
              smooth: true, // 曲线变平滑
              hoverAnimation: false,
              data: [
                97, 36, 56, 0.45, 0.95, 0.74, 6, 0.55, 0.97, 0.36, 56, 0.45, 0.95, 0.74, 0.66, 0.55, 97, 0.36, 0.56, 0.45, 0.95, 0.74, 0.66, 0.55, 97, 0.36, 0.56, 0.45, 95, 0.74, 66, 0.55, 0.97, 0.36, 0.56, 0.45, 0.95, 0.74, 0.66, 0.55, 0.97, 0.36, 0.56, 0.45, 0.95, 0.74, 0.66, 0.55
              ]
            },
            {
              name: '异常type2',
              type: 'line',
              symbol: 'none', // 去掉折线上的小圆点
              smooth: true, // 曲线变平滑
              xAxisIndex: 1,
              yAxisIndex: 1,
              symbolSize: 8,
              hoverAnimation: false,
              data: [
                0.037, 0.034, 0.035, 0.036, 0.044, 0.052, 0.037, 0.034, 0.035, 0.036, 0.044, 0.052, 0.037, 0.034, 0.035, 0.036, 0.044, 0.052, 0.037, 0.034, 0.035, 0.036, 0.044, 0.052, 0.037, 0.034, 0.035, 0.036, 0.044, 0.052, 0.037, 0.034, 0.035, 0.036, 0.044, 0.052, 0.037, 0.034, 0.035, 0.036, 0.044, 0.052
              ]
            }
          ]
      },
      chartExtend: {
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        }
      },
      radarExtend: {
        title: {
          // text: '系统资源',
          x: 'center',
          y: '-5px',
          textStyle: {
            fontSize: 14,
            color: '#333'// 主标题文字颜色
          }
        },
        radar: {
          splitArea: {
            show: false
          },
          splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              color: '#d9d9d9',
              // 分隔线颜色
              width: 1
              // 分隔线线宽
            }
          },
          axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: '#999',
              // 坐标轴线线的颜色。
              width: 1,
              // 坐标轴线线宽。
              type: 'solid'
              // 坐标轴线线的类型。
            }
          },
          shape: 'circle',
          center: ['50%', '50%'],
          radius: 50
        },
        series: {
          tooltip: {
            trigger: 'item'
          },
          areaStyle: { // 单项区域填充样式
            normal: {
              color: 'rgba(255,0,0,0.6)' // 填充的颜色。[ default: "#000" ]
            }
          }
        }
      },
      statisticsData: {
        columns: ['渠道', 'PV', 'TPS', 'ResponseTime', 'QPS'],
        rows: [
          { '渠道': '统计情况', 'PV': 1393, 'TPS': 1093, 'ResponseTime': 32, 'QPS': 132 }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    // this.getalArmHandleRate()
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 相应处置率
     */
    getalArmHandleRate () {
      // 告警处置率
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
